@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}
.web {
    header {
        .header_left {
            >a {
                display: inline-block;
                width: r(38);
                height: r(28);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .logo {
            position: relative;
            width: r(66);
            height: r(77);
            margin: 0 auto;
            line-height: r(135);
            transition: all inherit ease;
            transition: 2s;
            a {
                display: inline-block;
                width: r(66);
                height: r(77);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            >ul{
                position: absolute;
                top: r(-960);
                left: r(-344);
                width: r(752);
                height: r(960);
                background: #009cea;
                z-index: 2;
                transition: 2s;
                transition: all inherit ease;
                >li{
                    width: 100%;
                    height: r(140);
                    text-align: center;
                    cursor: pointer;
                    a{
                        display: block;
                        width: 100%;
                        height: r(140);
                        line-height: r(140);
                        font-size: r(58);
                        color: white;
                        font-weight: 200;
                    }
                }
            }
            &:hover{
                ul{
                    top: r(88);
                    display: block;
                }
            }
        }
    }
    section {
        .type_Box {
            ul {
                width: 100%;
                li {
                    width: 50%;
                    height: r(375);
                    float: left;
                    text-align: center;
                    h5 {
                        width: 100%;
                        color: white;
                        font-size: r(34);
                        padding-top: r(150);
                    }
                    p {
                        width: 100%;
                        color: #e5dfdf;
                        font-size: r(16);
                        line-height: r(30);
                    }
                }
                .li-1-1 {
                    background: url(../../img/img1/index_img_1.jpg) no-repeat;
                    background-size: r(375) r(375);
                }
                .li-1-2 {
                    background: url(../../img/img1/index_img_2.jpg) no-repeat;
                    background-size: r(375) r(375);
                }
                .li-2-1 {
                    background: url(../../img/img1/index_img_3.jpg) no-repeat;
                    background-size: r(375) r(375);
                }
                .li-2-2 {
                    background: url(../../img/img1/index_img_4.jpg) no-repeat;
                    background-size: r(375) r(375);
                }
                .li-3-1 {
                    background: url(../../img/img1/index_img_5.jpg) no-repeat;
                    background-size: r(375) r(375);
                }
                .li-3-2 {
                    background: url(../../img/img1/index_img_6.jpg) no-repeat;
                }
            }
        }
        .bottom_ul {
            li {
                width: 100%;
                height: r(100);
                background: #171616;
                text-align: center;
                border-bottom: r(1) solid #343333;
                a {
                    font-size: r(21);
                    line-height: r(100);
                    color: #343333;
                    font-weight: bold;
                }
            }
        }
    }
}